<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="father">
      <el-page-header @back="goBack" content="购买页面" class="header"></el-page-header>
      <div class="body">
        <div>
          <div class="body-item1">
            <img
              src="@/assets/discovery/4.png"
              alt=""
            />
        </div>
        <div class="body-item2">
          <div class="item2-item1">
            <div class="item1-content1">
              <h3>HUAWEI MatePad Pro 11</h3>
            </div>
            <div class="item1-content2">
              <div>销售价：￥4299</div>
              <div>
                <p> 销售数量
                <button @click="num == 0 ? 0 : num --">-</button>
                <button>{{ num }}</button>
                <button @click="num++">+</button></p>
              </div>
              <div class="money">所需金额：￥{{ total }}</div>
              <div class="content2-item3"><button class="item3-button" @click="pay">立即购买</button><button class="item3-button" @click="addShopcart">加入购物车</button></div>
            </div>
          </div>
          <div class="item2-item2">
            <div class="item2-content1">
              <h3>商品参数</h3>
            </div>
            <div class="item2-content2">
                <p>尺寸:<br>
                    方形半框光学镜:<br>
                    镜框 50 mm，中梁  23 mm，镜腿 149 mm<br>
                    飞行员光学镜:<br>
                    镜框 52 mm，中梁  19 mm，镜腿 149 mm<br>
                    无框光学镜:<br>
                    镜框 56.5  mm，中梁  17 mm，镜腿 149 mm<br>
                    金丝光学镜:<br>
                    镜框 54 mm，中梁  18 mm，镜腿 149 mm<br>
                    钛空光学镜:<br>
                    镜框 56 mm，中梁  13 mm，镜腿 149 mm<br>
                    传感器:<br>
                    加速度计/陀螺仪/电容传感器<br>
                    数据连接:<br>
                    蓝牙5.3、支持开盒自动弹窗配对、支持佩戴监测、支持蓝牙双设备连接。<br>
                    续航时间:<br>
                    聆听音乐:<br>
                    眼镜单次充电使用 11 小时<br>
                    语音通话：<br>
                    眼镜单次充电使用 9 小时<br>
                    设备控制<br>
                    敲击：<br>
                    敲击两下左右镜腿，可实现接听/挂断电话、暂停/播放音乐；支持自定义设置为唤醒语音助手<br>
                    滑动：<br>
                    左右腿滑动，可实现音量调节；支持自定义设置为上一首/下一首<br>
                    长按：<br>
                    长按左右腿，可实现来电拒接；佩戴时同时长按，可实现发起配对<br>
                    音频技术<br>
                    通话降噪（不支持主动降噪）/隐私聆听<br>
                    发声单元<br>
                    同向双振膜大振幅动圈单元 × 2，30 mm × 6 mm × 4.8 mm <br>
                    电池容量<br>
                    类型：<br>
                    锂离子聚合物电池<br>
                    容量：<br>
                    110 mAh（单镜腿最小值）<br>
                    充电方式:<br>
                    有线充电：USB Type-C（ 5V1A 及以上）<br>
                    眼镜：<br>
                    通过充电绳的磁吸弹片充电<br>
                    充电绳：<br>
                    USB Type-C 接口<br>
                    充电时间:<br>
                    50 分钟<br>
                    防尘抗水:<br>
                    P54
                </P>
            </div>
          </div>
        </div>
        </div>
      </div>
      <div class="hello_world">
        <button class="top" @click="toTop">
          <img src="@/assets/backToTop.png" width="100%">
        </button>
      </div>
    </div>
  </template>

<script>
import BScroll from 'better-scroll'
export default {
  name: 'z_seven_shop',
  data () {
    return {
      num: 0
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    toTop () {
      window.location.reload()
    },
    sunAdd () {
      this.num = this.num + 1
    },
    sumDelete () {
      if (this.num === 0) {
        this.num = this.num - 0
      } else {
        this.num = this.num - 1
      }
    },
    addShopcart () {
      this.$store.commit('shopcart/addShopcart', {
        id: 9,
        count: parseInt(this.num),
        price: 4299,
        detail: 'HUAWEI MatePad Pro 11',
        selected: true,
        url: require('@/assets/discovery/4.png'),
        path:'/goods4'
      })
    },
      pay() {
        this.$router.push({
          name: 'pay',
          params: {
            detail: {
              id: 9,
              count: parseInt(this.num),
              price: 4299,
              detail: 'HUAWEI MatePad Pro 11',
              selected: true,
              url: require('@/assets/discovery/4.png'),
              path:'/goods4'
            }
          }
        })
        this.$store.state.onHomePage = false
      }
  },
  computed: {
    total () {
      return this.num * 4299
    }
  },
  mounted () {
    this.$nextTick(() => {
    // eslint-disable-next-line no-undef
      this.scroll = new BScroll('.body', {
        click: true,
        mouseWheel: true
      })
    })
  }
}
</script>

  <style scoped>
  .money{
    margin-bottom:10px ;
  }
  .item3-button{
    background-color: red;
    border-radius: 5px;
    margin: 3px;
    opacity: 0.8;
  }
  .item1-content2{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .item2-content2{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .item1-content1{
    border-bottom: solid 1px gray;
  }
  .item2-content1{
    border-bottom: solid 1px gray;
  }
  .item2-item2{
    width: 440px;
    margin: 2px;
    border: solid 1px gray;
    border-radius: 5px;
    background-color: #fff;
    padding-left: 5px;
  }
  .item2-item1{
    width: 440px;
    margin: 2px;
    border: solid 1px gray;
    border-radius: 5px;
    background-color: #fff;
    padding-left: 5px;
  }
  .top{
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 100px;
    right: 5px;
    background-color: #fff;
    border: solid 1px gray;
    border-radius: 50%;
  }
  .body-item1{
    width: 450px;
    height: 50%;
  }
  .father{
    width: 450px;
    height: 100%;
  }
  .header{
    width: 100%;
    height:5%;
  }

  .body{
    width: 450px;
    height: 600px;
    overflow: hidden;
    background-color: #888;
    border-bottom: solid 1px gray;
  }
  </style>
